<template>
  <template v-if="confirm">
    <tiny-popconfirm :title="confirmText" type="info" trigger="click" @confirm="click">
      <template #reference>
        <tiny-button
            ref="lbtnRef"
            :disabled="disabled"
            :icon="getIcon"
            :type="type"
            :size="size"
            :reset-time="resetTime?resetTime:100"
            :text="text"
            :circle="circle"
            :loading="loading"
            :round="round"
            style="margin-left: 10px;"
        >
          <slot></slot>
        </tiny-button>
      </template>
    </tiny-popconfirm>
  </template>
  <template v-else>
    <tiny-button
        ref="lbtnRef"
        :disabled="disabled"
        :icon="getIcon"
        :type="type"
        :size="size"
        :reset-time="resetTime?resetTime:500"
        :text="text"
        :circle="circle"
        :loading="loading"
        :round="round"
        @click.stop="click"
        style="margin-left: 10px;"
    >
      <slot></slot>
    </tiny-button>
  </template>
</template>
<script setup>
import { IconDel, IconYes, IconEdit, IconSearch,
  IconPlus,IconMinus,IconArrowUp,IconArrowDown,IconDownload,
  IconRefres,IconMore,IconOperationfaildL ,IconPrintPreview,IconCheckedTrue,
    IconUndo
} from '@opentiny/vue-icon'
import {TinyButton,TinyPopconfirm} from "@opentiny/vue";
import {ref,computed} from 'vue'

const props = defineProps({
  size: {type: [String, Number], default: 'small'},
  text: {type: String, default: ''},
  type: {type: String, default: ''},
  disabled: {type: Boolean, default: false},
  circle: {type: Boolean, default: false},
  loading: {type: Boolean, default: false},
  inject: {type: Boolean, default: false},
  confirm: {type: Boolean, default: false},
  round: {type: Boolean, default: false},
  confirmText: {type: String, default: '确定操作 ？'},
  resetTime: {type: Number, default: 0},
  icon: {type: String, default: ''},
})
const emit = defineEmits(['click'])
const lbtnRef = ref()
const getIcon = computed(() => {
  return props.icon ?state.value[props.icon.toLowerCase()]: ''
})

const fApi = ref({})
const state = ref({
  del: IconDel(),
  yes: IconYes(),
  edit: IconEdit(),
  plus: IconPlus(),
  search: IconSearch(),
  minus: IconMinus(),
  arrowUp: IconArrowUp(),
  arrowDown: IconArrowDown(),
  download: IconDownload(),
  refresh: IconRefres(),
  more: IconMore(),
  close: IconOperationfaildL(),
  print: IconPrintPreview(),
  check: IconCheckedTrue(),
  undo: IconUndo(),
})
const click = () => {
  if(props.inject) {
    emit('click', fApi.value)
  }
  else {
    emit('click')
  }
}


const setApi = (api) => {
  fApi.value = api
  return null
}

defineExpose({ setApi})
</script>
<style scoped lang="scss">

:deep(.el-button--small) {

}
:deep(.el-button--large) {
  border-radius: 0 !important;
}

</style>